<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="./static/css/base.css" rel="stylesheet">
    <link href="./static/css/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.font.im/css?family=Source+Serif+Pro%7CLato%7CInconsolata" rel="stylesheet"
        type="text/css">
    <title> slide </title>
    <!-- browser favicon -->
    <link rel="shortcut icon" href="./static/img/favicon.ico">
    <style>
        .font-sans {
            font-family: 'Lato', 'SimHei', 'STHeiti', 'SimHei', 'Serif';
        }

        .font-serif {
            font-family: 'Source Serif Pro', 'Songti SC', 'SimSun', 'Serif', serif;
        }
    </style>
    <link rel="stylesheet" href="./static/katex/katex.min.css">
    <script defer src="./static/katex/katex.min.js"></script>
    <script defer src="./static/katex/auto-render.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            renderMathInElement(document.body, {
                // customised options
                // &#8226; auto-render specific keys, e.g.:
                delimiters: [
                    { left: '$$', right: '$$', display: true },
                    { left: '$', right: '$', display: false },
                    { left: '\\(', right: '\\)', display: false },
                    { left: '\\[', right: '\\]', display: true }
                ],
                // &#8226; rendering keys, e.g.:
                throwOnError: false
            });
        });
    </script>

    <link rel="stylesheet" href="./static/reveal/reveal.css">
    <link rel="stylesheet" href="./static/reveal/theme/simple.css" id="theme">
    <link rel="stylesheet" href="./static/jyy/jyy.css">

</head>

<body class="d-flex flex-column h-100">

    <div class="reveal">
        <div class="slides">
            <section>
                <section>
                    <div class="center middle">
                        <div style="width:100%">
                            <div>
                                <h1 id="jyyslide-md" class="text-2xl mt-2 font-sans">jyyslide-md</h1>
                                <hr />

                                <blockquote>
                                    <p class="font-serif my-1"><a href="https://github.com/zweix123">zweix</a></p>
                                </blockquote>
                            </div>
                        </div>
                    </div>
                </section>
            </section>
            <section>
                <section>
                    <div class="center middle">
                        <div style="width:100%">
                            <div>
                                <h1 id="_1" class="text-2xl mt-2 font-sans">让我们试试不一样的交互方式</h1>
                                <hr />

                                <blockquote>
                                    <p class="font-serif my-1">试试方向键<br />
                                        或者vim的<code>hjkl</code><br />
                                        或者滑动屏幕(移动端) </p>
                                </blockquote>
                            </div>
                        </div>
                    </div>
                </section>
                <section>
                    <div>
                        <h2 id="revealjsweb" class="text-xl mt-2 pb-2 font-sans">基于Reveal.js框架的Web幻灯片交互方式</h2>
                        <ul class="list-disc font-serif">
                            <li class="ml-8">通过方向键或者<code>hjkl</code>切换幻灯片</li>
                            <li class="ml-8">幻灯片维度更高，除了水平幻灯片还有竖直幻灯片</li>
                            <li class="ml-8">其他快捷键：<ul class="list-disc font-serif">
                                    <li class="ml-8"><code>o</code>或<code>esc</code>：总览</li>
                                    <li class="ml-8"><code>b</code>或者<code>v</code>：息屏、亮屏</li>
                                    <li class="ml-8"><code>f</code>：全屏（<code>esc</code>退出全屏）</li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </section>
            </section>
            <section>
                <section>
                    <div class="center middle">
                        <div style="width:100%">
                            <div>
                                <h1 id="_1" class="text-2xl mt-2 font-sans">发心</h1>
                            </div>
                        </div>
                    </div>
                </section>
                <section>
                    <div>
                        <h2 id="powerpoint" class="text-xl mt-2 pb-2 font-sans">PowerPoint</h2>
                        <blockquote>
                            <p class="font-serif my-1">可以从奥卡姆剃刀的角度考虑</p>
                        </blockquote>
                        <p class="font-serif my-1">能量点的功能非常丰富，但是功能多意味着学习成本大，但实际上我只需要很小部分的功能就能完成大部分的事情。<br />
                            由于这种复杂性，我们在借鉴别人的PPT模板时也由于对PPT本身不熟悉而不能发挥模板的全部效果</p>
                    </div>
                </section>
                <section>
                    <div>
                        <h2 id="web" class="text-xl mt-2 pb-2 font-sans">基于Web的幻灯片</h2>
                        <table>
                            <thead>
                                <tr>
                                    <th style="text-align: center;">框架</th>
                                    <th style="text-align: center;">说明</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td style="text-align: center;">Reveal.js</td>
                                    <td style="text-align: center;">功能多，难度大</td>
                                </tr>
                                <tr>
                                    <td style="text-align: center;">revael-md</td>
                                    <td style="text-align: center;">Reveal.js的前端，定制主题困难</td>
                                </tr>
                                <tr>
                                    <td style="text-align: center;">Slidev</td>
                                    <td style="text-align: center;">完备的软件，不支持垂直幻灯片</td>
                                </tr>
                                <tr>
                                    <td style="text-align: center;">VSCode插件、Obsidian默认插件</td>
                                    <td style="text-align: center;">功能少</td>
                                </tr>
                            </tbody>
                        </table>
                        <hr />

                        <p class="font-serif my-1">并没有完全满足我的要求的框架</p>
                    </div>
                </section>
                <section>
                    <div>
                        <h2 id="_1" class="text-xl mt-2 pb-2 font-sans"><a
                                href="http://jyywiki.cn/OS/2022/slides/1.slides#/">南京大学蒋炎岩老师幻灯片</a></h2>
                        <p class="font-serif my-1">蒋老师的幻灯片就很有意思，源码可以直接看，从代码上看大概也是使用了Reveal.js，但是自己定制了主题。<br />
                            在得到蒋老师的同意后，我通过类比老师的HTML源码开发出了这个将Markdown扩展语法转换成蒋老师幻灯片风格的工具。</p>
                    </div>
                </section>
            </section>
            <section>
                <section>
                    <div class="center middle">
                        <div style="width:100%">
                            <div>
                                <h1 id="_1" class="text-2xl mt-2 font-sans">扩展语法的介绍</h1>
                                <blockquote>
                                    <p class="font-serif my-1">解析不是编译过程，<br />
                                        而且简单的split，<br />
                                        所以关键字不能用于正文</p>
                                </blockquote>
                            </div>
                        </div>
                    </div>
                </section>
                <section>
                    <div>
                        <h2 id="_1" class="text-xl mt-2 pb-2 font-sans">作者信息</h2>
                        <p class="font-serif my-1">我们观察蒋老师幻灯片的这部分
                            <img class="center" src="./static/img/01c2c61129ca41ba9c49b27cd6938202.png" width="500px" />
                            文字和图片对应且都是外链，想通过Markdown扩展语法实现会破坏语法的简约，所以我选择在Markdown的开头设置文件信息。
                        </p>
                        <ul class="list-disc font-serif">
                            <li class="ml-8">使用标记<code>\n+++++\n</code>和正文分割，其格式使用Json，</li>
                        </ul>
                        <p class="font-serif my-1"><a
                                href="https://github.com/zweix123/jyyslide-md/blob/master/example/jyy/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F%E6%A6%82%E8%BF%B0.md">这个样例</a>就是上图效果。
                        </p>
                    </div>
                </section>
                <section>
                    <div>
                        <h2 id="_1" class="text-xl mt-2 pb-2 font-sans">水平幻灯片和垂直幻灯片</h2>
                        <p class="font-serif my-1">您已经体验过水平和垂直的幻灯片</p>
                        <ul class="list-disc font-serif">
                            <li class="ml-8">使用<code>\n---\n</code>（三个减号的单独行）来划分水平幻灯片</li>
                            <li class="ml-8">使用<code>\n----\n</code>（四个减号的单独行）来幻灯水平幻灯片</li>
                        </ul>
                        <blockquote>
                            <p class="font-serif my-1">更多的减号就是Markdwon的分隔符<code>&lt;hr&gt;</code></p>
                            <blockquote>
                                <p class="font-serif my-1"><code>&lt;hr&gt;</code>在幻灯片中的渲染不是分隔符而是空行</p>
                            </blockquote>
                        </blockquote>
                    </div>
                </section>
                <section>
                    <div class="center middle">
                        <div style="width:100%">
                            <div>
                                <h1 id="_1" class="text-2xl mt-2 font-sans">渐变幻灯片</h1>
                                <blockquote>
                                    <p class="font-serif my-1">下面展示一下典型应用</p>
                                </blockquote>
                            </div>
                        </div>
                    </div>
                </section>
                <section data-auto-animate>
                    <div>
                        <p class="font-serif my-1"><img class="center"
                                src="./static/img/e31cb6ff1c3d4ae09fcd5ebe7bf1db26.png" /></p>
                        <hr />

                        <blockquote>
                            <p class="font-serif my-1">每张渐变幻灯片的格式规则和普通幻灯片是一样的</p>
                        </blockquote>
                    </div>
                </section>
                <section data-auto-animate>
                    <div>
                        <p class="font-serif my-1"><img class="center"
                                src="./static/img/70a2a1e5d7ee4ff698ecdf2d709e2441.png" /></p>
                        <hr />

                        <ul class="list-disc font-serif">
                            <li class="ml-8">使用关键字<code>\n++++\n</code>来划分</li>
                        </ul>
                    </div>
                </section>
                <section data-auto-animate>
                    <div>
                        <p class="font-serif my-1"><img class="center"
                                src="./static/img/0e3d523d743b401194b7dce4c28559b2.png" /></p>
                        <hr />

                        <p class="font-serif my-1">这里展示了渐变幻灯片的典型应用：展示变化的过程</p>
                    </div>
                </section>
                <section data-auto-animate>
                    <div>
                        <p class="font-serif my-1"><img class="center"
                                src="./static/img/c8030b852f8c43499b848d356ffc0803.png" /></p>
                        <hr />

                        <p class="font-serif my-1">它不会像默认的主题那样使用切换的方式而突兀</p>
                    </div>
                </section>
                <section data-auto-animate>
                    <div>
                        <p class="font-serif my-1"><img class="center"
                                src="./static/img/2ee0fd5c3d824767bbf3c75eb537089a.png" /></p>
                        <hr />

                        <p class="font-serif my-1">上面展示的就是广度优先搜索的过程</p>
                    </div>
                </section>
                <section data-auto-animate>
                    <div>
                        <p class="font-serif my-1"><img class="center"
                                src="./static/img/dc8cb20d5d44433a9aac59f4acfc44b7.png" /></p>
                        <p class="font-serif my-1">这是最后倒数第七张</p>
                    </div>
                </section>
                <section data-auto-animate>
                    <div>
                        <p class="font-serif my-1"><img class="center"
                                src="./static/img/68f09159f31d4d92a43f61752d14999b.png" /></p>
                        <p class="font-serif my-1">这是最后倒数第六张</p>
                    </div>
                </section>
                <section data-auto-animate>
                    <div>
                        <p class="font-serif my-1"><img class="center"
                                src="./static/img/a3b6d4fa237240f5a714559be1c8a84e.png" /></p>
                        <p class="font-serif my-1">这是最后倒数第五张</p>
                    </div>
                </section>
                <section data-auto-animate>
                    <div>
                        <p class="font-serif my-1"><img class="center"
                                src="./static/img/f06295a5cf20468c8eda980e4c085dd8.png" /></p>
                        <p class="font-serif my-1">这是最后倒数第四张</p>
                    </div>
                </section>
                <section data-auto-animate>
                    <div>
                        <p class="font-serif my-1"><img class="center"
                                src="./static/img/c7ba81a333e34266bd5f7fd23a305e54.png" /></p>
                        <p class="font-serif my-1">这是最后倒数第三张</p>
                    </div>
                </section>
                <section data-auto-animate>
                    <div>
                        <p class="font-serif my-1"><img class="center"
                                src="./static/img/77564618dc974b8caa7359ecad692e45.png" /></p>
                        <p class="font-serif my-1">这是最后倒数第二张</p>
                    </div>
                </section>
                <section data-auto-animate>
                    <div>
                        <p class="font-serif my-1"><img class="center"
                                src="./static/img/616b4aaf0ecd49f9bae25173b97ec259.png" /></p>
                        <p class="font-serif my-1">这是最后一张</p>
                    </div>
                </section>
                <section>
                    <div>
                        <h2 id="_1" class="text-xl mt-2 pb-2 font-sans">每张幻灯片依次出现的部分</h2>
                        <div class="fragment" data-fragment-index="1">
                            <ul class="list-disc font-serif">
                                <li class="ml-8">本质是Reveal.js的<a href="https://revealjs.com/fragments/">fragments</a>
                                </li>
                            </ul>
                        </div>
                        <div class="fragment" data-fragment-index="2">
                            <ul class="list-disc font-serif">
                                <li class="ml-8">使用关键字<code>\n--\n</code>划分</li>
                            </ul>
                        </div>
                        <div class="fragment" data-fragment-index="3">
                            <div class="codehilite">
                                <pre class="bg-gray-100 overflow-x-auto rounded p-2 mb-2 mt-2"><span/><code>它划分的是从标记一下到下一个标记或者当前幻灯片末尾的部分
</code></pre>
                            </div>
                        </div>
                    </div>
                </section>
            </section>
            <section>
                <section>
                    <div class="center middle">
                        <div style="width:100%">
                            <div>
                                <h1 id="markdown" class="text-2xl mt-2 font-sans">对Markdown原生语法的适配</h1>
                            </div>
                        </div>
                    </div>
                </section>
                <section>
                    <div>
                        <h2 id="_1" class="text-xl mt-2 pb-2 font-sans">文本格式</h2>
                        <ul class="list-disc font-serif">
                            <li class="ml-8">通过Markdown原生语法支持<strong>加粗</strong>和<em>斜体</em></li>
                        </ul>
                        <div class="codehilite">
                            <pre class="bg-gray-100 overflow-x-auto rounded p-2 mb-2 mt-2"><span/><code>+ 通过Markdown原生语法支持**加粗**和*斜体*
</code></pre>
                        </div>

                        <ul class="list-disc font-serif">
                            <li class="ml-8">通过插入HTML支持<del>删除线</del>、<mark>高亮</mark>和<red>标红</red>
                            </li>
                        </ul>
                        <div class="codehilite">
                            <pre class="bg-gray-100 overflow-x-auto rounded p-2 mb-2 mt-2"><span/><code>+<span class="w"> </span>通过插入HTML支持<span class="nt">&lt;del&gt;</span>删除线<span class="nt">&lt;/del&gt;</span>、<span class="nt">&lt;mark&gt;</span>高亮<span class="nt">&lt;/mark&gt;</span>和<span class="nt">&lt;red&gt;</span>标红<span class="nt">&lt;/red&gt;</span>
</code></pre>
                        </div>

                        <ul class="list-disc font-serif">
                            <li class="ml-8">Markdown语法：<code>大于三个-的行</code><br />
                                在Markdown这语法是分割线<code>&lt;hr&gt;</code>，但是和我定义的扩展语法冲突，所以这里是大于四个的<code>-</code>才是，另外对转换后的<code>&lt;hr&gt;</code>，作用是空行而不是分割线。
                            </li>
                        </ul>
                    </div>
                </section>
                <section>
                    <div>
                        <h2 id="_1" class="text-xl mt-2 pb-2 font-sans">注释</h2>
                        <blockquote>
                            <p class="font-serif my-1">这是注释</p>
                        </blockquote>
                    </div>
                </section>
                <section>
                    <div>
                        <h2 id="_1" class="text-xl mt-2 pb-2 font-sans">列表</h2>
                        <ul class="list-disc font-serif">
                            <li class="ml-8">这是无序列表</li>
                            <li class="ml-8">这是无序列表</li>
                            <li class="ml-8">这是无序列表</li>
                        </ul>
                        <hr />

                        <ol>
                            <li class="ml-8">这是有序列表</li>
                            <li class="ml-8">这是有序列表</li>
                            <li class="ml-8">这是有序列表</li>
                        </ol>
                        <hr />

                        <ul class="list-disc font-serif">
                            <li class="ml-8">这是嵌套列表<ol>
                                    <li class="ml-8">1</li>
                                    <li class="ml-8">2</li>
                                    <li class="ml-8">3</li>
                                </ol>
                            </li>
                        </ul>
                    </div>
                </section>
                <section>
                    <div>
                        <h2 id="_1" class="text-xl mt-2 pb-2 font-sans">代码高亮</h2>
                        <div class="codehilite">
                            <pre class="bg-gray-100 overflow-x-auto rounded p-2 mb-2 mt-2"><span/><code><span class="cp">#include</span><span class="w"> </span><span class="cpf">&lt;iostream&gt;</span>

<span class="kt">int</span><span class="w"> </span><span class="nf">main</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="n">std</span><span class="o">::</span><span class="n">cout</span><span class="w"> </span><span class="o">&lt;&lt;</span><span class="w"> </span><span class="s">"Hello World!"</span><span class="w"> </span><span class="o">&lt;&lt;</span><span class="w"> </span><span class="n">std</span><span class="o">::</span><span class="n">endl</span><span class="p">;</span>

<span class="w">    </span><span class="k">return</span><span class="w"> </span><span class="mi">0</span><span class="p">;</span>
<span class="p">}</span>
</code></pre>
                        </div>

                        <blockquote>
                            <p class="font-serif my-1">Reveal-md和Slidev支持的代码特定行高亮暂时不支持</p>
                        </blockquote>
                    </div>
                </section>
                <section>
                    <div>
                        <h2 id="_1" class="text-xl mt-2 pb-2 font-sans">数学公式</h2>
                        <p class="font-serif my-1">$$\overbrace{1+2+\cdots+n}^{n个} \qquad
                            \underbrace{a+b+\cdots+z}_{26}$$</p>
                        <div class="codehilite">
                            <pre class="bg-gray-100 overflow-x-auto rounded p-2 mb-2 mt-2"><span/><code><span class="p">$$</span>\<span class="nv">overbrace</span><span class="p">{</span><span class="mi">1</span><span class="o">+</span><span class="mi">2</span><span class="o">+</span>\<span class="nv">cdots</span><span class="o">+</span><span class="nv">n</span><span class="p">}</span><span class="o">^</span><span class="p">{</span><span class="nv">n个</span><span class="p">}</span><span class="w"> </span>\<span class="nv">qquad</span><span class="w"> </span>\<span class="no">und</span><span class="nv">erbrace</span><span class="p">{</span><span class="nv">a</span><span class="o">+</span><span class="nv">b</span><span class="o">+</span>\<span class="nv">cdots</span><span class="o">+</span><span class="nv">z</span><span class="p">}</span><span class="nv">_</span><span class="p">{</span><span class="mi">26</span><span class="p">}$$</span>
</code></pre>
                        </div>

                        <hr />

                        <p class="font-serif my-1">$$\lim_{x \to \infty} x^2_{22} - \int_{1}^{5}x\mathrm{d}x +
                            \sum_{n=1}^{20} n^{2} = \prod_{j=1}^{3} y_{j} + \lim_{x \to -2} \frac{x-2}{x}$$</p>
                        <div class="codehilite">
                            <pre class="bg-gray-100 overflow-x-auto rounded p-2 mb-2 mt-2"><span/><code><span class="p">$$</span>\<span class="nv">lim_</span><span class="p">{</span><span class="nv">x</span><span class="w"> </span>\<span class="k">to</span><span class="w"> </span>\<span class="no">inf</span><span class="nv">ty</span><span class="p">}</span><span class="w"> </span><span class="nv">x</span><span class="o">^</span><span class="mi">2</span><span class="nv">_</span><span class="p">{</span><span class="mi">22</span><span class="p">}</span><span class="w"> </span><span class="o">-</span><span class="w"> </span>\<span class="nv">int_</span><span class="p">{</span><span class="mi">1</span><span class="p">}</span><span class="o">^</span><span class="p">{</span><span class="mi">5</span><span class="p">}</span><span class="nv">x</span>\<span class="nv">mathrm</span><span class="p">{</span><span class="nv">d</span><span class="p">}</span><span class="nv">x</span><span class="w"> </span><span class="o">+</span><span class="w"> </span>\<span class="nv">sum_</span><span class="p">{</span><span class="nv">n</span><span class="o">=</span><span class="mi">1</span><span class="p">}</span><span class="o">^</span><span class="p">{</span><span class="mi">20</span><span class="p">}</span><span class="w"> </span><span class="nv">n</span><span class="o">^</span><span class="p">{</span><span class="mi">2</span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span>\<span class="nv">prod_</span><span class="p">{</span><span class="nv">j</span><span class="o">=</span><span class="mi">1</span><span class="p">}</span><span class="o">^</span><span class="p">{</span><span class="mi">3</span><span class="p">}</span><span class="w"> </span><span class="nv">y_</span><span class="p">{</span><span class="nv">j</span><span class="p">}</span><span class="w">  </span><span class="o">+</span><span class="w"> </span>\<span class="nv">lim_</span><span class="p">{</span><span class="nv">x</span><span class="w"> </span>\<span class="k">to</span><span class="w"> </span><span class="o">-</span><span class="mi">2</span><span class="p">}</span><span class="w"> </span>\<span class="nv">frac</span><span class="p">{</span><span class="nv">x</span><span class="o">-</span><span class="mi">2</span><span class="p">}{</span><span class="nv">x</span><span class="p">}$$</span>
</code></pre>
                        </div>
                    </div>
                </section>
                <section>
                    <div>
                        <h2 id="_1" class="text-xl mt-2 pb-2 font-sans">引用：普通引用</h2>
                        <p class="font-serif my-1"><a href="https://github.com/opencurve/curve">分布式存储系统Curve</a></p>
                        <div class="codehilite">
                            <pre class="bg-gray-100 overflow-x-auto rounded p-2 mb-2 mt-2"><span/><code>[分布式存储系统Curve](https://github.com/opencurve/curve)
</code></pre>
                        </div>
                    </div>
                </section>
                <section>
                    <div>
                        <h2 id="_1" class="text-xl mt-2 pb-2 font-sans">引用：图片</h2>
                        <blockquote>
                            <p class="font-serif my-1">支持Markdown原生图片引用语法：<br />
                                <code>![图片失效显示的文字](图片的路径或者网址)</code>
                            </p>
                        </blockquote>
                        <p class="font-serif my-1">建议使用插入HTML的方式</p>
                        <div class="codehilite">
                            <pre class="bg-gray-100 overflow-x-auto rounded p-2 mb-2 mt-2"><span/><code><span class="p">&lt;</span><span class="nt">img</span> <span class="na">alt</span><span class="o">=</span><span class="s">"图片失效显示的文字"</span> <span class="na">src</span><span class="o">=</span><span class="s">"图片的路径或者网址"</span><span class="p">&gt;</span>
</code></pre>
                        </div>

                        <p class="font-serif my-1">这里<code>alt</code>并不是必须的</p>
                    </div>
                </section>
                <section>
                    <div>
                        <h2 id="_1" class="text-xl mt-2 pb-2 font-sans">图片格式</h2>
                        <ul class="list-disc font-serif">
                            <li class="ml-8">图片居中</li>
                        </ul>
                        <div class="codehilite">
                            <pre class="bg-gray-100 overflow-x-auto rounded p-2 mb-2 mt-2"><span/><code><span class="p">&lt;</span><span class="nt">img</span> <span class="na">alt</span><span class="o">=</span><span class="s">...</span> <span class="na">class</span><span class="o">=</span><span class="s">"center"</span> <span class="na">src</span><span class="o">=</span><span class="s">...</span><span class="p">&gt;</span>
</code></pre>
                        </div>

                        <blockquote>
                            <p class="font-serif my-1">顺序不关键</p>
                        </blockquote>
                        <ul class="list-disc font-serif">
                            <li class="ml-8">右对齐</li>
                        </ul>
                        <div class="codehilite">
                            <pre class="bg-gray-100 overflow-x-auto rounded p-2 mb-2 mt-2"><span/><code><span class="p">&lt;</span><span class="nt">img</span> <span class="na">alt</span><span class="o">=</span><span class="s">...</span> <span class="na">class</span><span class="o">=</span><span class="s">"float-right"</span> <span class="na">src</span><span class="o">=</span><span class="s">...</span><span class="p">&gt;</span>
</code></pre>
                        </div>

                        <blockquote>
                            <p class="font-serif my-1">Markdown是流的形式，即图片是占位的，但是这里右对齐的图片不占位</p>
                        </blockquote>
                        <ul class="list-disc font-serif">
                            <li class="ml-8">大小</li>
                        </ul>
                        <div class="codehilite">
                            <pre class="bg-gray-100 overflow-x-auto rounded p-2 mb-2 mt-2"><span/><code><span class="p">&lt;</span><span class="nt">img</span> <span class="err">...</span> <span class="na">src</span><span class="o">=</span><span class="s">...</span> <span class="na">width</span><span class="o">=</span><span class="s">"678px"</span><span class="p">&gt;</span>
</code></pre>
                        </div>
                    </div>
                </section>
                <section>
                    <div>
                        <h2 id="_1" class="text-xl mt-2 pb-2 font-sans">其他</h2>
                        <ul class="list-disc font-serif">
                            <li class="ml-8">关于自定义（需要前端知识）</li>
                        </ul>
                        <blockquote>
                            <p class="font-serif my-1">
                                自定义在本框架中是不推荐的，因为“像蒋炎岩”是项目的第一目的，其他的是次要，比如您需要自定义，要么您需要重构您的幻灯片，要么这个框架不适合您。</p>
                        </blockquote>
                        <p class="font-serif my-1">
                            蒋老师的主题样式都在静态文件下<code>jyy/jyy.css</code>文件中，网页的主体都在<code>.reveal .slides</code>下，在这里修改即可全局修改（推荐只修改诸如字体、字间距、行间距这样的属性，zweix的前端也不好，不知道其他修改会发生什么）
                        </p>
                    </div>
                </section>
            </section>
            <section>
                <section>
                    <div class="center middle">
                        <div style="width:100%">
                            <div>
                                <h1 id="_1" class="text-2xl mt-2 font-sans">谢谢</h1>
                                <blockquote>
                                    <p class="font-serif my-1">希望本工具能提高您的效率</p>
                                </blockquote>
                            </div>
                        </div>
                    </div>
                </section>
            </section>
        </div>
    </div>

    <script src="./static/reveal/reveal.js"></script>

    <script>
        Reveal.initialize({

            width: 1024, height: 768,

            slideNumber: 'c/t',
            controlsTutorial: false,
            progress: false,
            hash: true,
            center: false,
            autoAnimateUnmatched: true,
            autoAnimateEasing: 'ease-out',
            autoAnimateDuration: 0.3,
            transitionSpeed: 'fast'
        });
    </script>
</body>

</html>
